import React from 'react';
import { Row, Col, Form, InputNumber, Input, Button, Table, Select, Modal, Popconfirm, message } from 'antd';
const R = require('ramda');
import { connect } from 'dva/index';
import BizParams from '../../../components/commons/BizParams'
import Constants from "../../../utils/Constants";
import SingleDragger from '../../../components/commons/SingleDragger'

const FormItem = Form.Item;
const view = "view"

const requirementDetail = Form.create({ wrappedComponentRef: true })(class RequirementDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: true,
            url: "",
        }
    }

    handleCancel = () => {
        this.props.form.resetFields()
        if (this.refs.url) this.refs.url.resetUpload();
        this.setState({ open: false })
    }

    handleOpen = (disabled) => {
        this.setState({ open: true, disabled })
    }

    handleConfirm = () => {
        this.props.form.validateFields((errors, values) => {
            if (errors) return;
            values.url = R.isNil(this.refs.url.getUrl()) ? '' : this.refs.url.getUrl();
            if(!values.url){
                message.error("请上传附件");
                return;
            }
            let dataSource = this.props.requirement.dataSource ? this.props.requirement.dataSource : {};
            this.props.dispatch({
                type: dataSource.id ? 'requirement/update' : 'requirement/save',
                payload: {
                    buyerId: this.props.buyerId,
                    id: dataSource.id,
                    ...values,
                    onSuccess: () => {
                        this.handleCancel();
                        this.props.dispatch({ type: 'requirement/query', payload: { buyerId: this.props.buyerId, page: Constants.DEFAULT_PAGE } });
                    }
                }
            })
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        let formItemLayout = { labelCol: {span: 6}, wrapperCol: {span: 14}};
        let dataSource = this.props.dataSource ? this.props.dataSource : {};
        let footer = [
            <Button key="save" size="large" onClick={this.handleConfirm.bind(this)}>保存</Button>,
            <Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>取消</Button>
        ];
        return (
            <Modal visible={this.state.open} title={"添加需求"} width={600} wrapClassName="vertical-center-modal" maskClosable={false}
                footer={footer} onCancel={this.handleCancel}>
                <Form>
                            <FormItem {...formItemLayout} label="文件类型" hasFeedback>
                                {getFieldDecorator('type', {
                                    rules: [{
                                        required: true, message: '请输入文件类型'
                                    }],
                                    initialValue: dataSource.type
                                })(
                                    <Select disabled={this.state.disabled}>
                                        <Select.Option value="0">原始需求</Select.Option>
                                        <Select.Option value="1">交涉样品</Select.Option>
                                        <Select.Option value="2">签约生产</Select.Option>
                                    </Select>
                                    )}
                            </FormItem>

                            <FormItem {...formItemLayout} label="备注" hasFeedback>
                                {getFieldDecorator('memo', {
                                    rules: [{
                                        required: true, message: '请输入备注'
                                    }],
                                    initialValue: dataSource.memo
                                })(
                                    <Input.TextArea autosize={{ minRows: 2, maxRows: 10 }} maxLength="1000" disabled={this.state.disabled}/>
                                    )}
                            </FormItem>

                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">附件</span>} hasFeedback>
                                <SingleDragger url={R.isNil(this.state.url) ? '' : this.state.url} dataSource={dataSource} ref="url" module={Constants.FILE_MODULE[3]} disabled={this.state.disabled} />
                            </FormItem>

                </Form>
            </Modal>
        );
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.requirement, requirement: state.requirement
    };
}

export default connect(mapStateToProps)(requirementDetail);